<template>
  <view 
    class="fu-waterfall-item"
    :style="style"
    @click="onClick"
  >
    <!-- 图片 -->
    <image 
      v-if="image"
      class="fu-waterfall-item__image"
      :src="image"
      :mode="imageMode"
      @load="onImageLoad"
    />
    
    <!-- 标题 -->
    <view 
      v-if="title"
      class="fu-waterfall-item__title"
    >{{ title }}</view>
    
    <!-- 描述 -->
    <view 
      v-if="desc"
      class="fu-waterfall-item__desc"
    >{{ desc }}</view>
    
    <!-- 自定义内容 -->
    <slot></slot>
  </view>
</template>

<script>
/**
 * fu-waterfall-item 瀑布流项组件
 * @description 瀑布流组件的子组件
 * @property {String} image - 图片地址
 * @property {String} imageMode - 图片裁剪模式
 * @property {String} title - 标题
 * @property {String} desc - 描述文本
 * @event {Function} click - 点击时触发
 */
export default {
  name: 'fu-waterfall-item',
  props: {
    image: {
      type: String,
      default: ''
    },
    imageMode: {
      type: String,
      default: 'widthFix'
    },
    title: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    column: {
      type: String,
      required: true
    }
  },
  emits: ['click', 'height-change'],
  data() {
    return {
      itemHeight: 0
    }
  },
  computed: {
    style() {
      return {
        marginBottom: `${this.$parent.columnGap}rpx`
      }
    }
  },
  methods: {
    onClick(event) {
      this.$emit('click', event)
    },
    onImageLoad(event) {
      const query = uni.createSelectorQuery().in(this)
      query.select('.fu-waterfall-item').boundingClientRect(data => {
        this.itemHeight = data.height
        // 更新列高度
        this.$emit('height-change', {
          column: this.column,
          height: this.itemHeight + this.$parent.columnGap
        })
      }).exec()
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-waterfall-item {
  background-color: #fff;
  border-radius: var(--fu-radius-base);
  overflow: hidden;
  
  &:active {
    opacity: 0.8;
  }
  
  &__image {
    width: 100%;
    display: block;
  }
  
  &__title {
    padding: 20rpx;
    font-size: 28rpx;
    line-height: 1.5;
    color: var(--fu-text-color);
  }
  
  &__desc {
    padding: 0 20rpx 20rpx;
    font-size: 24rpx;
    line-height: 1.5;
    color: var(--fu-text-color-secondary);
  }
}
</style> 